<template>
  <div :style="commpStyle" style="display: flex; align-items: center">
    <div :class="dynamicSetIpBoxStyle" style="height: 32px !important; ">
      <el-input v-model.number="ip1"
                maxlength='3' ref='ip1'
                :class="dynamicSetIpInputStyle"
                @keyup.native="keyupEvent(1,$event)"
                @input="(val) => handleInpIp(val,'ip1')"
                :size="inputSize"
                :disabled="disabled"></el-input>
      <span class="dot">.</span>
      <el-input v-model.number="ip2"
                maxlength='3' ref='ip2'
                :class="dynamicSetIpInputStyle"
                @keyup.native="keyupEvent(2,$event)"
                @input="(val) => handleInpIp(val,'ip2')"
                :size="inputSize"
                :disabled="disabled"></el-input>
      <span class="dot">.</span>
      <el-input v-model.number="ip3"
                maxlength='3' ref='ip3'
                :class="dynamicSetIpInputStyle"
                @keyup.native="keyupEvent(3,$event)"
                @input="(val) => handleInpIp(val,'ip3')"
                :size="inputSize"
                :disabled="disabled"></el-input>
      <span class="dot">.</span>
      <el-input v-model.number="ip4"
                maxlength='3' ref='ip4'
                :class="dynamicSetIpInputStyle"
                @keyup.native="keyupEvent(4,$event)"
                @input="(val) => handleInpIp(val,'ip4')"
                :size="inputSize"
                :disabled="disabled"></el-input>
    </div>
    <div v-if="markFlag" class="ym" style="display: flex; align-items: center">
      <span style="margin: 0 4px">/</span>
      <el-input ref='ip5' class="markInput" v-model="ip5"
                @keyup.native="keyupEvent(5,$event)"
                @input="(val) => submitIp()"></el-input>
    </div>
  </div>
</template>

<script>
import baseComp from "./baseComp";

export default {
  name: "commonIp",
  extends: baseComp,
  model: {
    prop: "value",
    event: "ipChange",
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    markFlag: {
      type: Boolean,
      default: false
    },
    //inputSize  根element是size一样  有三种选择  mini small medium
    inputSize: {
      type: String,
      default: ""
    },
    //boxWidth 三种选择  miniWidth  smallWidth  mediumWidth  不满足样式请自定义样   如下style
    boxWidth: String,
    //当前默认传递过来的值
    value: String
  },
  data() {
    return {
      ip1: '',
      ip2: '',
      ip3: '',
      ip4: '',
      ip5: '',
      //默认样式
      dynamicSetIpBoxStyle: 'ipBoxSmall',
      dynamicSetIpInputStyle: 'ipinputSmall',
      dynamicSetCircleCloseStyle: 'closeSmall'
    };
  },
  created() {
    if (this.boxWidth === 'miniWidth') {
      this.dynamicSetIpBoxStyle = 'ipBoxMini';
      this.dynamicSetIpInputStyle = 'ipinputMini';
      this.dynamicSetCircleCloseStyle = 'closeMini';
    }
    if (this.boxWidth === 'mediumWidth') {
      this.dynamicSetIpBoxStyle = 'ipBoxMedium';
      this.dynamicSetIpInputStyle = 'ipinputMedium';
      this.dynamicSetCircleCloseStyle = 'closeMedium';
    }
    //自定义样式在这里配置
    if (this.boxWidth === 'scanWidth') {
      this.dynamicSetIpBoxStyle = 'ipBoxScan';
      this.dynamicSetIpInputStyle = 'ipinputScan';
      this.dynamicSetCircleCloseStyle = 'closeScan';
    }

  },
  watch: {
    value: {
      handler(val) {
        let ipStr = val;
        if (ipStr != '' && ipStr !== null && ipStr !== undefined) {
          if (ipStr.includes('/')) {
            let split = ipStr.split('/');
            ipStr = split[0];
            this.ip5 = split[1]
          }
          let ipList = ipStr.split('.');
          this.ip1 = ipList[0];
          this.ip2 = ipList[1];
          this.ip3 = ipList[2];
          this.ip4 = ipList[3];
        } else {
          this.ip1 = '';
          this.ip2 = '';
          this.ip3 = '';
          this.ip4 = '';
          this.ip5 = '';
        }
      },
      immediate: true,  //刷新加载 立马触发一次handler
      deep: true  // 可以深度检测到 obj 对象的属性值的变化
    },
    disabled: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.changeBackground();
        }
      },
      deep: true,
      immediate: true
    }

  },
  computed: {},
  methods: {
    //监听键盘
    keyupEvent(index, e) {
      //按下.键跳到下一个输入框（同理可做出其他按键的跳转输入框）
      if (e.keyCode === 110 || e.keyCode === 190) {//不同键盘键位对应 . 的值 87键->190  104键->110
        //判断当前位置值为空，则不做任何处理。
        if (!this['ip' + index]) {
          return;
        }
        if (index == 1) {
          this.$refs.ip2.focus();
        } else if (index == 2) {
          this.$refs.ip3.focus();
        } else if (index == 3) {
          this.$refs.ip4.focus();
        } else if (index == 4) {
          this.$refs.ip5.focus();
        }
      }
      //删除键
      if (e.keyCode == 8) {
        if (index > 1 && !this['ip' + index]) {
          this.$refs['ip' + (index - 1)].focus();
        }
      }
      //右移动键
      if (e.keyCode == 39) {
        if (index < 5) {
          this.$refs['ip' + (index + 1)].focus();
        }
      }
      //左移动键
      if (e.keyCode == 37) {
        if (index > 1) {
          this.$refs['ip' + (index - 1)].focus();
        }
      }
      if (e.keyCode === 13) {
        let ip = this.submitIp()
        if (this.ip1 && this.ip2 && this.ip3 && this.ip4) {
          this.$emit('checkIp', ip)
        }
      }
    },
    // 到失去输入框焦点时
    submitIp() {
      //失去焦点判断值是否输入完整，并向父组件传整个ip值
      let echo = [];
      if (this.ip1) {
        echo.push(this.ip1);
      }
      if (this.ip2) {
        echo.push(this.ip2);
      }
      if (this.ip3) {
        echo.push(this.ip3);
      }
      if (this.ip4) {
        echo.push(this.ip4);
      }
      let ipStr = echo.join('.');
      if (this.ip5) {
        ipStr = ipStr + "/" + this.ip5;
      }
      this.$emit('ipChange', ipStr);
      //这是防止elementui的form表单验证必填项时显示文字的也就是required,用不到可不写
      this.$parent.$emit("el.form.change");
      return echo.join('.');
    },
    //输入的值
    handleInpIp(val, key) {
      //检查并判断当前输入值是否符合数字要求
      val = val.replace(/[^\d]/g, '');
      this[key] = val;
      //判断输入的ip值  0和255位保留ip  不使用
      if (parseInt(val) > 255) {
        //输入值超过255，则显示为254，并且跳到下一个输入框
        switch (key) {
          case "ip1":
            this.ip1 = 255;
            this.$refs.ip2.focus();
            break;
          case "ip2":
            this.ip2 = 255;
            this.$refs.ip3.focus();
            break;
          case "ip3":
            this.ip3 = 255;
            this.$refs.ip4.focus();
            break;
          case "ip4":
            this.ip4 = 255;
            break;
          default:
            break;
        }
      } else if (parseInt(val) <= 255 && parseInt(val) >= 100) {
        //输入三位数自动跳到下一个输入值
        switch (key) {
          case "ip1":
            this.$refs.ip2.focus();
            break;
          case "ip2":
            this.$refs.ip3.focus();
            break;
          case "ip3":
            this.$refs.ip4.focus();
            break;
          case "ip4":
            if (this.$refs.ip5){
              this.$refs.ip5.focus();
            }
            break;
          default:
            break;
        }
      }
      this.submitIp();
    },
    //禁用时改变input背景
    changeBackground() {

    },
  },


}
</script>

<style scoped lang='less'>
.dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  //height: 100%;
  //line-height: 50%;
}

/***********   medium样式 为默认样式   **********/
.ipBoxMedium {
  border: 1px solid #DCDFE6;
  background-color: #FFF;
  display: inline-block;
  //border-radius: 5px;
  line-height: 0px;
  position: relative;
  top: 0;
  left: 0;
}
.ipBoxMedium:hover{
  border: 1px solid #C0C4CC;
}
.ipBoxSmall:active{
  border: 1px solid #409EFF;
}
.ipinputMedium {
  display: inline-block;
  width: 23%;

  /deep/ .el-input__inner {
    border: 0;
  }

  font-size: 16px;
}

.closeMedium {
  display: none;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 12px;
}

&:hover {
  .closeMedium {
    display: inline-block;
  }
}

/***********   small样式    **********/
.ipBoxSmall {
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  background-color: #FFF;
  display: inline-block;
  //border-radius: 5px;
  line-height: 0px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.ipBoxSmall:hover{
  border: 1px solid #C0C4CC;
}
.ipBoxSmall:active{
  border: 1px solid #409EFF;
}
.ipinputSmall {
  display: inline-block;
  width: 23%;
  height: 100%;

  /deep/ .el-input__inner {
    height: 100%;
    padding: 0px 0px;
    text-align: center;
    border: 0;
  }

  font-size: 14px;
}

.closeSmall {
  display: none;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 13px;
}

&:hover {
  .closeSmall {
    display: inline-block;
  }
}

/***********   mini样式    **********/
.ipBoxMini {
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  background-color: #FFF;
  display: inline-block;
  //border-radius: 2px;
  line-height: 0px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.ipBoxMini:hover{
  border: 1px solid #C0C4CC;
}
.ipBoxMini:active{
  border: 1px solid #409EFF;
}

.ipinputMini {
  display: inline-block;
  width: 23%;
  height: 100%;

  /deep/ .el-input__inner {
    height: 100%;
    padding: 2px;
    text-align: center;
    border: 0;
  }

  font-size: 14px;

}

.closeMini {
  display: none;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 12px;
}

&:hover {
  .closeMini {
    display: inline-block;
  }
}

/***********   IP扫描样式    **********/
.ipBoxScan {
  border: 1px solid #37393a;
  display: inline-block;
  //border-radius: 6px;
  line-height: 0px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ipinputScan {
  display: inline-block;
  width: 23%;
  height: 100%;

  /deep/ .el-input__inner {
    height: 100%;
    padding: 2px;
    //text-align: center;
    border: 0;
  }

  font-size: 14px;

}

.closeScan {
  display: none;
  font-size: 8px;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 8px;
}

//页面显示时就显示
&:hover {
  .closeScan {
    display: inline-block;
  }
}

/deep/ .markInput {
  .el-input__inner {
    height: 34px;
    //border-radius: 6px;
  }

}
</style>
